<template>
    <div>
        <el-card shadow="always" class="main">
            <div class="head">
                <el-image class="logo" :src="logo" fit="fit" />
            </div>
            <div>
                <span class="title">登录至DPC商城系统</span>
            </div>
            <div class="body">
                <el-form :model="form" :rules="rules">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item prop="username" >
                                <el-input placeholder="请输入要注册的账号" v-model="form.username" maxlength="50">
                                    <template slot="prepend">
                                        <i class="el-icon-user"></i>
                                    </template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item prop="password" >
                                <el-input type="password" placeholder="请输入密码" v-model="form.password" maxlength="50">
                                    <template slot="prepend">
                                        <i class="el-icon-key"></i>
                                    </template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-checkbox v-model="login.type">3天内自动登录</el-checkbox>
                        </el-col>
                        <el-col :span="6">
                            <el-link href="/user/reg" :underline="false">注册</el-link>
                        </el-col>
                        <el-col :span="6">
                            <el-link href="/user/back" :underline="false">忘记密码</el-link>
                        </el-col>
                        <el-col :span="24">
                            <el-button class="submit" type="primary" @click="isLogin(form)">登录</el-button>
                        </el-col>
                        <el-col :span="24">
                            <span>
                                登录代表你已同意
                                <el-link href="https://element.eleme.io" target="_blank" type="primary">用户协议</el-link>
                                和
                                <el-link href="https://element.eleme.io" target="_blank" type="primary">隐私政策</el-link>
                            </span>
                        </el-col>
                        <el-col :span="24">
                            <span>Copyright @ 2020 DPC 版权所有</span>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </el-card>
    </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
    data() {
        return {
            logo: require('@/assets/img/test1.jpg'),
            form: {
                username: '',
                password: '',
            },
            login: {
                type: '',
            },
            // 输入框验证
            rules: {
                username: [
                    { required: true, message: '请输入要注册的用户名', trigger: 'blur' },
                    { min: 8, max: 50, message: '请输入正确的账号格式', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 8, max: 50, message: '请输入正确的密码格式', trigger: 'blur' }
                ]
            }
        };
    },
    computed: {
        // 取值
        ...mapState({
            user: state => state.user.user,
            user_data: state => state.user.user_data
        })
    },
    methods: {
        // 用户登录
        isLogin(value) {
            let _this = this;
            this.$get(this.$api.user, {
                type: 'login',
                username: value.username,
                password: value.password
            })
            .then(function (res) {
                if (res.type == 'succeed') {
                    // 提示
                    _this.$message({
                        message: '登录成功'+res.token,
                        type: 'success'
                    });
                    // 写入cookie
                    _this.$cookies.set("token",res.token,"29min"); // 分钟
                    // 写入数据到vuex
                    _this.$store.commit('user/save_user', {
                        username: value.username,
                        token: res.token
                    });
                    // 跳转到某页面
                    _this.$router.push({ path : '/'})


                } else {
                    _this.$message({
                        message: res.remark,
                        type: 'error'
                    });
                }

            })
            .catch(function (error) {
                console.log(error);
            });
        }
    }
}
</script>

<style lang="less" scoped>
.main {
    width: 400px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    .head {
        text-align: center;
        .logo {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            text-align: center;
        }
    }
    div {
        margin-bottom: 2%;
        text-align: center;
        .title {
            font-size: 20px;
            font-weight: bold;
            letter-spacing: 4px;
        }
        .body {
            margin-top: 10%;
            margin-left: 32px;
            margin-right: 32px;
            text-align: left;
            .el-col {
                height: 60px;
            }
            .submit {
                width: 98%;
            }
        }
    }
}

</style>